<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_425307_3ebqz1q0an0cnmi.css"/>
	</head>
	
	<body>
		<header>
			<i class="iconfont icon-icon"></i>
			<span class="title1"></span>
		</header>
		<div class="timer">
			<span class="time"></span> <span class="author"></span> &nbsp;&nbsp;&nbsp;<span class="form"></span>
		</div>
		<video class="Video" width="90%" height="240" poster="" src="" controls >
			您的浏览器不支持 HTML5 video 标签。
		</video>
		 <!--<div class="bad-video">
            <video width="100%" height="240" class="Video" id="videoplay">
                <source  src='' type="video/mp4" ></source>
                <p>设备不支持</p>
            </video>
            <i class="iconfont icon-bofang1"></i>
            <div class="controls1">
               <div class="pgs2">
               		<i class="iconfont icon-bofang2"></i>
               		<span class="start-time1">00:00</span>
					<div class="pgs-play" id="progress">
						<span class="play"><span class="yuan"></span></span>
					</div>
					<span class="audio-time1">00:00</span>
					<i class="iconfont icon-quanping"></i>
				</div>
            </div>
        </div>-->
		<div class="Audio">
			<div class="left"> 
				<button class="play-pause" id="playPause">
		            <span class="iconfont icon-bofang "></span>
		    	</button>
			</div>
			<div class="right">
				<div class="title">
					<p class="p1"></p>
					<p class="p2">来自，<span class="form"></span></p>
				</div>
				<div class="pgs">
					<div class="pgs-play" id="progress">
						<span class="play"><span class="yuan"></span></span>
					</div>
				</div>
				<audio id="audioTag" src=""></audio>
				<div class="controls">
					<span class="played-time">00:00</span>
					<span class="audio-time" id="audioTime">0</span>
				</div>
			</div>
		</div>
		<div class="text">
			
		</div>
		<div class="read">
			<span class="span1">阅读：<b class="click">1221</b></span>
			<span class="span2"><i class="iconfont icon-zan1"></i><span class="num">99</span ></span>
		</div>
	</body>
	<script src="../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$.ajax({
		type:"post",
		url:"http://web.tl178.cn/Radio/scenic_detail",
		async:true,
		data:{
			Id:localStorage.getItem("routeId")
		},
		success:function(data){
			var data = JSON.parse(data)["list"]
			console.log(data)
			if(!data["voice"]){
				$(".Audio").hide()
			}else{
				$(".Audio").show()
				$("#audioTag").attr("src",data["voice"])
			}
			$(".time").html(data["time"])
			$(".author").html(data["author"])
			$(".form").html(data["form"])
			$(".title1").html(data["title"])
			$(".text").html(data["content"])
			$(".right .p1").html(data["voice_title"])
			$(".click").html(data["click"])		
			
			if(!data["radio"]){
				$(".Video").hide()
			}else{
				$(".Video").show()
				$("video").attr("poster",data["radio_img"])
				$("video").css("background","rgba(0,0,0,0.8)")
				$(".Video").attr("src",data["radio"])
			}
		}		
	});
			
		var audio = $('#audioTag').get(0);
		$('#audioTag').on("loadedmetadata", function() {
//			console.log(audio.duration) //获取音频总时长
	       $('#audioTime').text(transTime(this.duration));
		});
		$('#playPause').click(function() {
			//监听音频播放时间并更新进度条
        	audio.addEventListener('timeupdate',updateProgress,false);
        	//监听播放完成事件
        	audio.addEventListener('ended',audioEnded,false);
			//改变暂停/播放icon
			if(audio.paused) {
				audio.play();
				$('.left .iconfont').removeClass('icon-bofang').addClass('icon-zanting')
			} else {
				audio.pause();
				$('.left .iconfont').removeClass('icon-zanting').addClass('icon-bofang')
			}
		})
		
		var pgsWidth = $('.pgs .pgs-play').width()*1; //获取当前进度条div的长度
    	//点击进度条跳到指定点播放
	    $('.pgs .pgs-play').click(function (e) {
	        var rate = (e.offsetX)/pgsWidth;
	        audio.currentTime = audio.duration * rate;
	        updateProgress();
	    });
		//转换音频时长显示
		function transTime(time) {
			var duration = parseInt(time);
			var minute = parseInt(duration / 60);
			var sec = duration % 60 + '';
			var isM0 = ':';
			if(minute == 0) {
				minute = '00';
			} else if(minute < 10) {
				minute = '0' + minute;
			}
			if(sec.length == 1) {
				sec = '0' + sec;
			}
			return minute + isM0 + sec
		}
		//更新进度条
	function updateProgress() {
	    var audio =document.getElementsByTagName('audio')[0];
	    var value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration+6.3)) * 100, 0);
	    $('.play').css('width', value * 1 + '%');
	    $(".play").css("display","block")	
	    $(".yuan").css("left",(value * 1) + '%')
	    $('.played-time').html(transTime(audio.currentTime));	
	}
	//播放完成
	function audioEnded() {
	    var audio =document.getElementsByTagName('audio')[0];
	    audio.currentTime=0;
	    audio.pause();
	    $('.play-pause>span').removeClass('icon-zanting').addClass('icon-bofang');
	}
	$(".icon-zan1").click(function(){
		var num = $(".num").html()*1
		if($(this).attr("class")=="iconfont icon-zan1"){
			$(this).addClass("active")
			$(".num").html(num+1)
		}else{
			$(this).removeClass("active")
			$(".num").html(num-1)
		}
	})
	$(".icon-icon").click(function(){
		history.back()
	})
//	var video = $("#videoplay").get(0)
//	$(".icon-bofang1").click(function(){
//		if(video.paused) {
//				video.play();
//				$('.left .iconfont').removeClass('icon-bofang').addClass('icon-zanting')
//			} else {
//				video.pause();
//				$('.left .iconfont').removeClass('icon-zanting').addClass('icon-bofang')
//			}
//	})
	</script>
</html>